<template>
  <div class="detail">
    <el-card class="marginBottom10">
        <template slot="header">
            <span class="title">商品信息</span>
        </template>
        <el-form label-width="80px" label-position="left">
            <el-form-item label="货品名称">{{product.product_name}}
            </el-form-item>
            <el-form-item label="规格">{{specification.price}}元/{{specification.name}} 
                {{specification.mini_wholesale_quantity}}{{specification.name}} 起批
            </el-form-item>
            <el-form-item label="数量">{{order.trade_volume}}{{specification.name}} 
            </el-form-item>
            <el-form-item label="总价">{{order.total_price}}
            </el-form-item>
            <el-form-item label="#应付金额">
            </el-form-item>
        </el-form>
    </el-card>
    <el-card class="marginBottom10">
        <template slot="header">
            <span class="title">配送信息</span>
        </template>
        <el-form label-width="80px" label-position="left">
            <el-form-item label="#预计送达"> 2000-01-01
            </el-form-item>
        </el-form>
        <DeliveryAddress :address="address" />
    </el-card>
    <el-card class="order">
        <template slot="header">
            <span class="title">订单信息</span>
        </template>
        <el-form label-width="80px" label-position="left">
            <el-form-item label="订单号">{{order.id}}
            </el-form-item>
            <el-form-item label="下单时间">{{order.order_start_time}}
            </el-form-item>
            <el-form-item label="完成时间">{{order.order_end_time || '~'}}
            </el-form-item>
            <el-form-item label="支付方式">支付宝
            </el-form-item>
            <el-form-item label="订单状态">{{status[order.deal_status]}}
            </el-form-item>
        </el-form>
        <div class="bt-box" v-if="order.deal_status == 1">
            <div class="bt">
                <el-button type="text" @click="confirm">确认发货</el-button>
            </div>
            <div class="bt">
                <el-button type="text" @click="cancel">取消订单</el-button>
            </div>
        </div>
    </el-card>
  </div>
</template>

<script>
import DeliveryAddress from '@/components/DeliveryAddress.vue'
export default {
    components:{
        DeliveryAddress
    },
    data() {
        return {
            order: {},
            address: {},
            product:{},
            specification:{},
            status: this.$global.ORDERSTATUS
        }
    },
    methods: {
      confirm() {
        this.$confirm('是否确定货品已经发出?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          return this.$API.modifyProductOrder({
            ...this.order,
            deal_status: 2
          }, this.order.id)
        }).then(res => {
          if (res.status == 200) {
            this.$message.success('发货成功')
            this.load()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });          
        });
      },
      cancel() {
        // this.$API.deleteProductOrder(this.$store.state.params.oid).then(res => {
        //     if (res.status == 200) {
        //         this.$message.success('订单已取消')
        //         this.$router.push('/buyer/order')
        //     }
        // })
      },
      async load() {
          await this.$API.getOneProductOrder(this.$store.state.params.oid).then(res => {
              if (res.status == 200) {
                  this.order = res.data
                  return this.$API.getOneSpecification(this.order .product_specification_id)
              }
          }).then(res => {
              if (res.status == 200) {
                  this.specification = res.data
                  return this.$API.getOneDeliveryAddress(this.order.delivery_address_id)
              }
          }).then(res => {
              if (res.status == 200) {
                  this.address = res.data
                  return this.$API.getOneSupply(this.specification.product_id)
              }
          }).then(res => {
              if (res.status == 200) {
                  this.product = res.data
              }
          })
      }
    },
    created() {
        this.load()
    }
}
</script>

<style lang='less' scoped>
.title{
    color: @color-theme;
}
.el-form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.el-form-item{
    min-width: 250px;
}
.marginBottom10{
    margin-bottom: 10px;
}
.order{
    border-bottom: none;
    /deep/ .el-card__body{
        padding-bottom: 0;
    }
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    .bt-box{
        display: flex;
        flex-direction: row;
        border-top: 1px solid #EBEEF5;
        .bt{
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            .el-button{
                font-size: 1rem;
            }
        }
    }
}

</style>